<template>
    <div class="anaphase">
        <el-divider content-position="left" border-style="dashed">后期</el-divider>

        <el-collapse v-model="activeNames">
            <el-collapse-item title="画面" name="1">
                <div class="title">
                    <span>色彩优化</span>
                    <el-switch v-model="tonemapperCheck" @change="handlerTonemapperChange" />
                </div>
                <div class="item">
                    <span>对比度</span>
                    <el-slider @change="handlerChange($event, 'contrast')" class="slider" v-model="tonemapperOption.contrast" :disabled="!tonemapperCheck" :step="0.1" :max="2" :min="1" />
                </div>
                <div class="item">
                    <span>饱和度</span>
                    <el-slider @change="handlerChange($event, 'saturation')" class="slider" v-model="tonemapperOption.saturation" :disabled="!tonemapperCheck" :step="0.1" :max="2" :min="1" />
                </div>
                <div class="item">
                    <span>泛光</span>
                    <el-slider @change="handlerChange($event, 'bloomIntensity')" class="slider" v-model="tonemapperOption.bloomIntensity" :disabled="!tonemapperCheck" :step="0.1" :max="10" :min="0" />
                </div>
                <div class="item">
                    <span>环境光遮罩</span>
                    <el-slider @change="handlerChange($event, 'ambientIntensity')" class="slider" v-model="tonemapperOption.ambientIntensity" :disabled="!tonemapperCheck" :step="0.1" :max="1" :min="0" />
                </div>
            </el-collapse-item>
            <el-collapse-item title="LUT调色" name="2">
                <div class="title">
                    <span>开启调色</span>
                    <el-switch v-model="LUT" @change="handlerLUTChange" />
                </div>
                <div class="item">
                    <span>效果</span>
                    <div class="select">
                        <el-select :popper-append-to-body="false" @change="handlerLutItem($event, 'lutMode')" class="slider" :disabled="!LUT" v-model="lutOption.lutMode" placeholder="Select" size="small">
                            <el-option style="height: 110px" v-for="(item, index) in results" :key="index" :label="item.label" :value="index + 1">
                                <div class="optionItem">
                                    <img :src="item.img" :alt="item.label" />
                                    <span>{{ item.label }}</span>
                                </div>
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="item">
                    <span>强度</span>
                    <el-slider @change="handlerLutItem($event, 'lutIntensity')" class="slider" v-model="lutOption.lutIntensity" :disabled="!LUT" :step="0.01" :max="1" :min="0" />
                </div>
            </el-collapse-item>
            <el-collapse-item title="滤镜" name="3">
                <div class="title">
                    <span>开启滤镜</span>
                    <el-switch v-model="topaz" @change="handlerTopazChange" />
                </div>
                <div class="item">
                    <span>效果</span>
                    <el-select :popper-append-to-body="false" @change="handlerProcessItem($event, 'postProcessEffects')" class="slider" :disabled="!topaz" v-model="processOption.postProcessEffects" placeholder="Select" size="small">
                        <el-option style="height: 110px" v-for="(item, index) in topazList" :key="index" :label="item.label" :value="index + 2">
                            <div class="optionItem">
                                <img :src="item.img" :alt="item.label" />
                                <span>{{ item.label }}</span>
                            </div>
                        </el-option>
                    </el-select>
                </div>
                <div class="item">
                    <span>线宽</span>
                    <el-slider @change="handlerProcessItem($event, 'wireThickness')" class="slider" v-model="processOption.wireThickness" :disabled="!topaz" :step="0.1" :max="3" :min="1" />
                </div>
            </el-collapse-item>
            <el-collapse-item title="景深" name="4">
                <div class="title">
                    <span>开启景深</span>
                    <el-switch v-model="depthOfField" @change="handlerDepthOfFieldChange" />
                </div>
                <div class="item">
                    <span>距离</span>
                    <el-slider @change="handlerDistanceItem" class="slider" v-model="depth" :disabled="!depthOfField" :step="1" :max="3" :min="0" />
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { useAnaphaseStore } from '@/stores/anaphase'
import { getPostProcessMode } from '@/utils/getInoByVedio'

const anaphaseStore = useAnaphaseStore()
const lutOption = computed(() => anaphaseStore.lutOption)
//是否开启色彩优化
const tonemapperOption = computed(() => anaphaseStore.tonemapperOption)
const tonemapperCheck = computed(() => anaphaseStore.tonemapperOption.tonemapper != 0)
const processOption = computed(() => anaphaseStore.processOption)
//是否开启LUT
const LUT = ref(false)
// 滤镜
const results = [
    {
        label: '仲夏',
        img: require('@/assets/images/滤镜/仲夏.png')
    },
    {
        label: '即可春光',
        img: require('@/assets/images/滤镜/即可春光.png')
    },
    {
        label: '反转',
        img: require('@/assets/images/滤镜/反转.png')
    },
    {
        label: '回忆时光',
        img: require('@/assets/images/滤镜/回忆时光.png')
    },
    {
        label: '夕阳',
        img: require('@/assets/images/滤镜/夕阳.png')
    },
    {
        label: '外星',
        img: require('@/assets/images/滤镜/外星.png')
    },
    {
        label: '怀旧',
        img: require('@/assets/images/滤镜/怀旧.png')
    },
    {
        label: '晚樱',
        img: require('@/assets/images/滤镜/晚樱.png')
    },
    {
        label: '晴空',
        img: require('@/assets/images/滤镜/晴空.png')
    },
    {
        label: '暗夜',
        img: require('@/assets/images/滤镜/暗夜.png')
    },
    {
        label: '朦胧',
        img: require('@/assets/images/滤镜/朦胧.png')
    },
    {
        label: '柠檬青',
        img: require('@/assets/images/滤镜/柠檬青.png')
    },
    {
        label: '清晨',
        img: require('@/assets/images/滤镜/清晨.png')
    },
    {
        label: '白强光',
        img: require('@/assets/images/滤镜/白强光.png')
    },
    {
        label: '粉夏',
        img: require('@/assets/images/滤镜/粉夏.png')
    },
    {
        label: '素雅',
        img: require('@/assets/images/滤镜/素雅.png')
    },
    {
        label: '紫罗兰',
        img: require('@/assets/images/滤镜/紫罗兰.png')
    },
    {
        label: '老照片',
        img: require('@/assets/images/滤镜/老照片.png')
    },
    {
        label: '蒸汽波',
        img: require('@/assets/images/滤镜/蒸汽波.png')
    },
    {
        label: '蓝冷',
        img: require('@/assets/images/滤镜/蓝冷.png')
    },
    {
        label: '蓝调',
        img: require('@/assets/images/滤镜/蓝调.png')
    },
    {
        label: '阳光都市',
        img: require('@/assets/images/滤镜/阳光都市.png')
    },
    {
        label: '青绿',
        img: require('@/assets/images/滤镜/青绿.png')
    },
    {
        label: '青蓝',
        img: require('@/assets/images/滤镜/青蓝.png')
    },
    {
        label: '青黄',
        img: require('@/assets/images/滤镜/青黄.png')
    },
    {
        label: '高对比',
        img: require('@/assets/images/滤镜/高对比.png')
    },
    {
        label: '高曝光',
        img: require('@/assets/images/滤镜/高曝光.png')
    },
    {
        label: '鲜艳',
        img: require('@/assets/images/滤镜/鲜艳.png')
    },
    {
        label: '黑白',
        img: require('@/assets/images/滤镜/黑白.png')
    },
    {
        label: '黑白漫画',
        img: require('@/assets/images/滤镜/黑白漫画.png')
    }
]
const activeNames = ref(['1', '2', '3', '4'])
// 是否开启滤镜
let topaz = ref(false)
const topazList = [
    {
        label: '线框',
        img: require('@/assets/images/滤镜/线框.png')
    },
    {
        label: '圆珠笔',
        img: require('@/assets/images/滤镜/圆珠笔.png')
    },
    {
        label: '白框',
        img: require('@/assets/images/滤镜/白框.png')
    },
    {
        label: '蓝图',
        img: require('@/assets/images/滤镜/蓝图.png')
    }
]
let depthOfField = ref(false)
let depth = ref(0)
const handlerDepthOfFieldChange = (val: any) => {
    let option = { ...anaphaseStore.tonemapperOption, postProcessEffects: val ? 1 : 0 }
    __g.settingsPanel.setPostProcessMode(option)
}
/**
 * 控制色彩优化可选
 * @param val
 */
const handlerTonemapperChange = (val: boolean) => {
    let option = { ...anaphaseStore.tonemapperOption, tonemapper: val }
    anaphaseStore.setTonemapperOption(option)
    __g.settingsPanel.setPostProcessMode(option)
}
/**
 * 控制LUT可选
 * @param val
 */
const handlerLUTChange = (val: boolean) => {
    if (val) {
        __g.settingsPanel.setPostProcessMode({
            ...anaphaseStore.tonemapperOption,
            ...anaphaseStore.lutOption
        })
    } else {
        __g.settingsPanel.setPostProcessMode({
            ...anaphaseStore.tonemapperOption,
            lutMode: 0
        })
    }
}
/**
 * 控制滤镜可选
 * @param val
 */
const handlerTopazChange = (val: boolean) => {
    if (val) {
        __g.settingsPanel.setPostProcessMode({
            ...anaphaseStore.tonemapperOption,
            ...anaphaseStore.processOption
        })
    } else {
        __g.settingsPanel.setPostProcessMode({
            ...anaphaseStore.tonemapperOption,
            postProcessEffects: 0
        })
    }
}
const handlerChange = async (val: any, type: string) => {
    let option: any = {}
    option[type] = val
    __g.settingsPanel.setPostProcessMode({ ...anaphaseStore.tonemapperOption, ...option })
    await anaphaseStore.setTonemapperOption({ ...anaphaseStore.tonemapperOption, ...option })
}

const handlerLutItem = (val: any, type: string) => {
    let option: any = {}
    option[type] = val
    __g.settingsPanel.setPostProcessMode({ ...anaphaseStore.tonemapperOption, ...option })
    anaphaseStore.setLutOption({ ...anaphaseStore.lutOption, ...option })
}

const handlerProcessItem = (val: any, type: string) => {
    let option: any = {}
    option[type] = val
    __g.settingsPanel.setPostProcessMode({ ...anaphaseStore.tonemapperOption, ...option })
    anaphaseStore.setProcessOption({ ...anaphaseStore.processOption, ...option })
}

const handlerDistanceItem = (val: any) => {
    __g.settingsPanel.setPostProcessMode({ ...anaphaseStore.tonemapperOption, dofMode: val })
}

onMounted(() => {
    getPostProcessMode()
})
</script>

<style lang="scss" scoped>
.anaphase {
    position: absolute;
    @include Width(300);
    @include Top(130);
    @include Right(200);
    @include Padding(10, 10, 10, 10);
    border-radius: 2%;
    margin: auto;
    z-index: 10;
    background: rgb(28, 39, 52);
    .title {
        display: flex;
        justify-content: space-between;
    }
    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
        @include hHeight(30);
        @include Margin(10, 0, 10, 0);
        .slider {
            @include Width(160);
            @include MarginRight(10);
            /deep/ .el-slider__runway {
                background-color: transparent;
            }

            /deep/ .el-slider__button {
                @include Width(15);
                @include wHeight(15);
                @include MarginLeft(8);
                border-color: rgb(102, 221, 255);
                background: radial-gradient(rgba(102, 221, 255, 0.9), rgba(0, 0, 0, 0.8));
            }
        }
    }
    /deep/ .el-select__popper.el-popper[role='tooltip'] {
        background: rgb(28, 39, 52);
        border: 1px solid rgb(9, 34, 65);
        color: #fff;
    }
    /deep/.el-popper.is-light .el-popper__arrow::before {
        background: rgb(28, 39, 52);
    }
}
.optionItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    @include Padding(10, 0, 0, 0);
    img {
        @include BorderRadius(5);
    }
}
/deep/ .el-select-dropdown__item {
    color: #fff;
}
/deep/ .el-select-dropdown {
    background: rgb(28, 39, 52);
    border: 1px solid rgb(28, 39, 52);
}

/deep/ .el-select-dropdown__item.hover {
    background-color: rgba(10, 21, 46, 1);
}

/deep/ .el-select-dropdown__item:hover {
    background-color: rgba(10, 21, 46, 1);
}
/deep/.el-input.is-disabled .el-input__inner {
    background-color: rgba(10, 21, 46, 0.5);
    border-color: rgba(10, 21, 46, 0.5);
}
/deep/.el-input__inner {
    background-color: rgba(10, 21, 46, 0.5);
    border-color: rgba(10, 21, 46, 0.5);
    color: #fff;
}

/deep/ .el-divider__text {
    background: rgb(28, 39, 52);
    color: #fff;
}
/deep/ .el-collapse {
    border-top: none;
}
/deep/ .el-collapse-item__header {
    background: rgb(28, 39, 52);
    color: #fff;
    border-bottom: none;
}
/deep/ .el-collapse-item__content {
    background: rgb(28, 39, 52);
    color: #fff;
    padding: 5px;
}
/deep/ .el-collapse-item__wrap {
    background: none;
    border-bottom: none;
    overflow: unset;
}
</style>
